<template>
  <div class="main-content">
    <div class="main-container">
      <div class="modular-header">
        <span class="spot"></span>
        <span class="name">选择项目</span>
        <el-select v-model="searchParams.premisesId" clearable filterable placeholder="全部项目"  >
            <el-option
            v-for="item in caseMemberList"
            :key="item.premisesId"
            :label="item.premisesName"
            :value="item.premisesId">
            </el-option>
        </el-select>
      </div>
      <ul class="modular-list">
        <li class="col-lg-4 fillCol">
          <div class="modular-content">
            <div class="modular-title">
              <span class="iconA"></span>
              <span class="titleName">成交佣金</span>
              <span class="addLabel">（已发放）</span>
            </div>
            <p class="modular-total">
              <a id="commissionAmount" style="cursor:default">{{
                commission.received
              }}</a>
            </p>
            <div class="modular-foot">
              <a class="modular-item" style="cursor:default">
                <p>待发</p>
                <p class="item-number" id="unCommissionAmount">
                  {{ commission.unReceived }}
                </p>
              </a>
            </div>
          </div>
        </li>
        <li class="col-lg-4 fillCol">
          <div class="modular-content modularB">
            <div class="modular-title">
              <span class="iconA"></span>
              <span class="titleName">客户</span>
            </div>
            <p class="modular-total">
              <a style="cursor:default" id="customerTotal">{{
                reportCount.customerTotal
              }}</a>
            </p>
            <div class="modular-foot">
              <a style="cursor:default;width: 33%" class="modular-item">
                <p>今日新增</p>
                <p class="item-number" id="customerTodayAdd">
                  {{ reportCount.customerTodayAdd }}
                </p>
              </a>
              <a
                style="cursor:default;width: 33%;border-right: 1px solid #cdcdcd;"
                class="modular-item"
              >
                <p>昨日新增</p>
                <p class="item-number" id="customerDayAdd">
                  {{ reportCount.customerDayAdd }}
                </p>
              </a>
              <a style="cursor:default;width: 33%" class="modular-item">
                <p>待审</p>
                <p class="item-number" id="customerReviewed">
                  {{ reportCount.customerReviewed }}
                </p>
              </a>
            </div>
          </div>
        </li>
      </ul>
      <div class="channel-management">
        <div class="modular-header">
          <span class="spot"></span>
          <span class="name">渠道管理</span>
        </div>
        <ul class="management-list">
          <li class="col-lg-2 col-md-4 fillCol">
            <router-link :to="{ name: 'cusPre' }" class="management-item">
              <span class="itemImg itemImgB"></span>报备管理
            </router-link>
          </li>
          <li class="col-lg-2 col-md-4 fillCol">
            <router-link
              :to="{ name: 'orgCommissionNew' }"
              class="management-item"
            >
              <span class="itemImg itemImgD"></span>佣金管理
            </router-link>
          </li>
          <li class="col-lg-2 col-md-4 fillCol">
            <router-link :to="{ name: 'cusPreAppeal' }" class="management-item">
              <span class="itemImg itemImgE"></span>申诉处理
            </router-link>
          </li>
          <li class="col-lg-2 col-md-4 fillCol">
            <router-link
              :to="{ name: 'cusConversionReport' }"
              class="management-item"
            >
              <span class="itemImg itemImgF"></span>数据中心
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      indexBasic: {},
      searchParams: {
        premisesId: '',
        premisesIds: ''
      },
      caseMemberList: [],
      reportCount: {
        customerTotal: 0,
        customerDayAdd: 0,
        customerReviewed: 0
      },
      commission: {
        received: 0,
        unReceived: 0
      }
    }
  },
  mounted: function() {
    //初始化
    this.initCaseMember()
  },
  watch: {
    'searchParams.premisesId': function(newValue, oldValue) {
      this.buildProjectIds(newValue)
    }
  },
  methods: {
    initCaseMember: function(projectId) {
      var _self = this
      var body = {}
      body.params = {}
      var url = this.utilHelper.apiUrl + '/api/getCaseMemberList'
      _self.$http.post(url, body).then(response => {
        var body = response.body
        var result = body.result
        var resData = body.resData
        var caseMemberList = resData.caseMemberList
        _self.caseMemberList = caseMemberList
        _self.searchParams.premisesId = caseMemberList[0].premisesId;
      })
    },
    getProjectCommissionStatistics: function(flag, dateQuery) {
      var _self = this
      var body = {}
      body.params = _self.searchParams
      var url = this.utilHelper.apiUrl + '/api/getPremisesCommission'
      _self.$http.post(url, body).then(response => {
        var body = response.body
        var result = body.result
        var resData = body.resData
        _self.commission.received =
          resData.data == undefined? 0 : resData.data.agentReceivedCommission
        _self.commission.unReceived =
          resData.data== undefined  ? 0 : resData.data.agentPendingCommission
      })
    },
    getCPStatisticsByPremises: function(commissionList, flag) {
      var _self = this
      var body = {}
      body.params = _self.searchParams
      var url = this.utilHelper.apiUrl + '/api/getCPStatisticsByPremises'
      _self.$http.post(url, body).then(response => {
        var body = response.body
        var result = body.result
        var resData = body.resData
        var reportCountList = resData.reportCountList
        _self.reportCount.customerTotal = reportCountList[0]
        _self.reportCount.customerDayAdd = reportCountList[1]
        _self.reportCount.customerReviewed = reportCountList[2]
        _self.reportCount.customerTodayAdd = reportCountList[3]
      })
    },
    buildProjectIds: function(premisesId) {
      console.log("premisesId = ", premisesId);
      var _self = this
      if (premisesId) {
        _self.searchParams.premisesId = premisesId
        _self.searchParams.premisesIds = ''
      } else {
        if (_self.caseMemberList.length > 0) {
          var premisesIds = ''
          for (var ii = 0; ii < _self.caseMemberList.length; ii++) {
            var caseMember = _self.caseMemberList[ii]
            premisesIds += caseMember.premisesId
            if (ii != _self.caseMemberList.length - 1) {
              premisesIds += ','
            }
          }
          _self.searchParams.premisesIds = premisesIds
        }
      }
      //获取楼盘佣金统计
      _self.getProjectCommissionStatistics()
      //楼盘报备人员统计
      _self.getCPStatisticsByPremises()
    }
  }
}
</script>

<style scoped>
body,
button,
dd,
div,
dl,
dt,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: #333;
}
body {
  font-family: Microsoft YaHei, '微软雅黑';
}
li {
  list-style: none;
}
a {
  color: #333;
}
a,
button,
input,
textarea {
  outline: none;
}
a:hover,
a:focus {
  cursor: pointer;
  text-decoration: none;
  color: #333;
  outline: none;
}
.fillCol {
  padding-left: 0;
  padding-right: 0;
}
.main-container {
  position: relative;
  padding: 14px 20px;
}
.modular-header {
  position: relative;
  line-height: 36px;
}
.modular-header .spot {
  width: 6px;
  height: 6px;
  background-color: #eb6100;
  display: inline-block;
  border-radius: 100%;
  float: left;
  margin-top: 15px;
  margin-right: 12px;
}
.modular-header .name {
  color: #333;
  font-size: 16px;
  font-weight: bold;
}
.modular-header .itemsBtn {
  width: 130px;
  height: 36px;
  line-height: 36px;
  border: 1px solid #eb6100;
  display: inline-block;
  text-align: center;
  margin-left: 18px;
  color: #eb6100;
  background-color: #fff;
  padding-left: 10px;
  border-radius: 36px;
}

/*3大模块*/
.modular-list {
  margin: 20px 0;
}
.modular-list li {
  margin-bottom: 20px;
}
.modular-content {
  border: 1px solid #cdcdcd;
  height: 220px;
  padding: 20px;
}
.modular-title {
  line-height: 20px;
  height: 20px;
  overflow: hidden;
}
.modular-title .iconA {
  width: 15px;
  height: 20px;
  display: inline-block;
  background: url(../../assets/images/iconA.png);
  background-position: 0 0;
  float: left;
  margin-right: 10px;
}
.modular-title .titleName {
  font-size: 16px;
  color: #01a6bf;
  float: left;
}
.modular-title .addLabel {
  float: left;
  color: #787878;
  font-size: 16px;
}
.modular-total {
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 110px;
}
.modular-total a {
  color: #01a6bf;
  font-size: 40px;
}
.modular-foot .modular-item {
  float: left;
  width: 50%;
  text-align: center;
  padding: 0 6px;
}
.modular-foot .modular-item:first-child {
  border-right: 1px solid #cdcdcd;
}
.modular-item .item-number {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #01a6bf;
  font-size: 16px;
}
.modularB .iconA {
  background-position: -15px 0;
}
.modularB .titleName,
.modularB .modular-total a,
.modularB .item-number {
  color: #fca430;
}
.modularC .iconA {
  background-position: -30px 0;
}
.modularC .titleName,
.modularC .modular-total a,
.modularC .item-number {
  color: #fb6d9d;
}

/*渠道管理*/
.channel-management {
  background-color: #eceef2;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.management-list {
  margin-top: 8px;
}
.management-list li {
  margin-bottom: 10px;
  padding-right: 0;
}
.management-item {
  padding-left: 60px;
  line-height: 54px;
  height: 54px;
  text-align: center;
  background: #fff;
  display: block;
  font-size: 16px;
  position: relative;
}
.management-item .itemImg {
  width: 60px;
  height: 54px;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../../assets/images/iconB.jpg);
  background-position: 0 0;
}
.management-item .itemImgB {
  background-position: -60px 0;
}
.management-item .itemImgC {
  background-position: -120px 0;
}
.management-item .itemImgD {
  background-position: -180px 0;
}
.management-item .itemImgE {
  background-position: -240px 0;
}
.management-item .itemImgF {
  background-position: -300px 0;
}

/*通知信息*/
.notice-list {
  margin-bottom: 20px;
}
.notice-list-item {
  border: 1px solid #cdcdcd;
  padding: 20px;
  min-height: 231px;
}
.notice-item-news li {
  height: 32px;
  line-height: 32px;
  border-bottom: 1px dashed #cdcdcd;
  margin-bottom: 6px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notice-item-news li:last-child {
  border: none;
}
.notice-item-news .newsText {
  line-height: 20px;
}
.notice-item-news .newsText:hover {
  text-decoration: underline;
}

/*增长趋势*/
.growth-trend {
  padding: 20px;
  border: 1px solid #cdcdcd;
}
.histogram-info {
  width: 100%;
  overflow: hidden;
}

/*通用*/
.modular-list li:last-child,
.management-list li:last-child {
  padding-right: 0;
}

/*自适应判断*/
@media (min-width: 1200px) {
  .modular-list li {
    padding-right: 20px;
  }
  .management-list li,
  .notice-list:first-child {
    padding-right: 10px;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .management-list li:nth-child(3) {
    padding-right: 0;
  }
  .management-list li {
    padding-right: 10px;
  }
}
/* 清除浮动 */
.main-container:after,
.modular-header:after,
.modular-list:after,
.modular-foot:after,
.management-list:after,
.notice-model:after {
  content: '';
  display: block;
  clear: both;
  visibility: hidden;
  overflow: hidden;
  font-size: 0;
  height: 0;
}
</style>
